<template>
  <div style="background-color: #ecf5ff;min-height: 100vh">
    <top-nav></top-nav>

    <div class="hotel-list-bg d-flex align-items-center justify-content-center position-relative">
      <img src="@/assets/images/hotel-list-bg.png" alt="">
    </div>

    <div class="gourmet-container">
      <div class="wrap">
        <div class="wrap_top">
          <el-tabs v-model="snackType" @tab-click="handleClick">
            <el-tab-pane label="全部" name="all"/>
            <el-tab-pane label="饼干/薯片" name="饼干/薯片"/>
            <el-tab-pane label="麻辣" name="麻辣"/>
            <el-tab-pane label="饮料" name="饮料"/>
          </el-tabs>
          <div class="search-bar">
            <el-input v-model="queryParams.snackName" placeholder="请输入零食名称" class="search-input" clearable/>
            <el-button style="height: 40px" type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          </div>
        </div>
        <div class="wrap_content">
          <div class="gourmet-card" v-for="snack in snacks" :key="snack.id">
            <img :src="snack.snackUrl" alt="Snack" class="card-image" />
            <div class="card-content">
              <h3 class="card-title mb5">{{ snack.snackName }}</h3>
              <p class="card-type mb5">类型：{{ snack.snackType }}</p>
              <p class="card-price mb5">价格：￥{{ snack.snackPrice }}</p>
              <p class="card-type">商品数量：{{ snack.snackNums }}</p>
              <div style="text-align: right">
                <el-button type="primary" icon="el-icon-plus" circle class="button_plus" @click="changeAdd(snack)"/>
              </div>
            </div>
          </div>
        </div>

        <div class="wrap_bottom">
          <el-pagination
            v-show="snackType === 'all'"
            background
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>

      <div class="wrap_right">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h1>购物车</h1>
          </div>
          <div class="wrap_right_content">
            <div v-if="Object.keys(this.snacksShoppingCart).length === 0"><el-empty description="暂无商品"></el-empty></div>
            <div v-else class="gourmet-card" v-for="(snack, key) in snacksShoppingCart" :key="snack.id + key">
              <img :src="snack.snackUrl" alt="Snack" class="card-image" />
              <div class="card-content">
                <h3 class="card-title mb5">{{ snack.snackName }}</h3>
                <p class="card-type mb5">类型：{{ snack.snackType }}</p>
                <p class="card-price">价格：￥{{ snack.snackPrice }}</p>
                <div style="text-align: right">
                  <el-button type="primary" icon="el-icon-minus" circle class="button_plus" @click="changeMinusProductCart(key)"/>
                  <el-button type="primary" icon="el-icon-plus" circle class="button_plus" @click="changeAdd(snack)"/>
                </div>
              </div>
            </div>
          </div>
          <div class="box_bottom">
            <el-button style="width: 100%;" type="primary" icon="el-icon-shopping-cart-1" @click="changePayment">支付</el-button>
          </div>
        </el-card>
      </div>
    </div>

    <el-dialog
      title="请选择支付方式"
      :visible.sync="dialogVisible"
      width="300px"
      :before-close="handleClose">
      <div class="dialogPayment">
        <el-select v-model="paymentType">
          <el-option label="微信" value="微信"/>
          <el-option label="支付宝" value="支付宝"/>
          <el-option label="其他" value="其他"/>
        </el-select>
        <el-button style="margin-left: 10px" type="primary" @click="firmPayment">确认支付</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {get, post} from "@/utils/request";
import TopNav from "@/components/TopNav.vue";

export default {
  name: "Gourmet",
  components: {TopNav},
  data() {
    return {
      paymentType: '',
      snackType:'all',
      NewpageSize: 20,
      loading: false,
      total: 0,
      snacks: [],
      queryParams: {
        snackNam: '',
        pageSize: 20,
        pageNum: 1
      },
      sortList: [],
      snacksShoppingCart: {},
      indexSign: 0,
      dialogVisible: false,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    handleClose(){
      this.dialogVisible = false
      this.handleClick()
    },

    async changePayment(){
      if(Object.keys(this.snacksShoppingCart).length === 0){
        this.$message.error('请选择商品');
        return
      }
      this.dialogVisible = true
    },

    async firmPayment(){
      const snacksShoppingCart_Array = Object.values(this.snacksShoppingCart).map(item => {
        return {
          snackId: item.id,
          orderNums: 1,
          payWay: this.paymentType,
          amount: item.snackNums,
          status: '已支付'
        }
      })

      const {data} = await post('api/snackOrder/addBatch', snacksShoppingCart_Array);
      if(data.code === '200'){
        this.$message.success('支付成功');
        this.snacksShoppingCart = {}
        await this.handleClose()

      }
    },

    changeMinusProductCart(idSign){
      this.$delete(this.snacksShoppingCart, idSign);
      this.$message.success('删除成功');
    },

    changeAdd(row){
      const idSign = this.indexSign++;
      this.$set(this.snacksShoppingCart, idSign, {
        ...row
      });
    },

    async init(){
      await this.getList()
      await this.getSortList()
    },

    async getSortList(){
      const {data} = await get('api/snackOrder/queryCountByType', this.queryParams);
      if(data.code === '200'){
        this.sortList = data.data
      }
    },

    handleQuery(){
      this.snackType = 'all'
      this.getList(this.queryParams.pageSize, 1)
    },

    handleClick(){
      if(this.snackType === 'all'){
        this.getList(undefined, 1)
      } else {
        this.snacks = this.sortList[this.snackType]
      }
    },

    handleSizeChange(newSize) {
      this.getList(newSize, 1);
    },
    handleCurrentChange(newPage) {
      this.getList(undefined, newPage);
    },

    async getList(pageSize, pageNum) {
      this.queryParams.pageSize = pageSize || this.queryParams.pageSize;
      this.queryParams.pageNum = pageNum || this.queryParams.pageNum;

      try {
        this.loading = true;
        const {data} = await post('snack/list', this.queryParams);
        if (data.code === '200') {
          this.snacks = data.rows;
          this.total = data.total;
        }
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped>
.dialogPayment{
  display: flex;
  width: 100%;
}

.pagination{
  background: white;
  padding: 10px;
}
.wrap{
  width: 62%;
  padding: 20px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gourmet-container {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.gourmet-card {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  width: 240px
}

.card-image {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  object-fit: cover;
}

.card-content {
  flex-grow: 1;
}

.mb5{
  margin-bottom: 5px;
}

.wrap_content{
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;
}

.wrap_top{
  display: flex;
  justify-content: space-between;
}

.search-bar{
  display: flex;
}

.wrap_bottom{
  text-align: right;
}

.button_plus{
  font-size: 12px;
  padding: 3px;
  width: 20px;
  height: 20px;
}

.wrap_right{
  margin-left: 10px;

}

.wrap_right_content{
  width: 300px;
  height: 500px;
  overflow: auto;
}

.box_bottom{
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

@media (max-width: 600px) {
  .gourmet-card {
    flex-direction: column;
    width: 100%; /* 移动设备上全宽 */
  }
  .card-image {
    width: 100%;
    height: 200px; /* 图片在上方，更宽更高 */
    margin-right: 0;
  }
}

.hotel-list-bg {
  width: 100%;
  height: 220px;
}

.hotel-list-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 220px;
}

.hotel-list-bg h3 {
  margin-bottom: 25px;
  font-size: 36px;
  font-weight: 400;
  color: #FFFFFF;
}

@media screen and (max-width: 767.9px) { /* 页面测试无法显示767，实际是767.2px */
  .hotel-list-bg {
    height: 120px;
  }
  .hotel-list-bg img {
    height: 120px;
  }

  .hotel-list li {
    background-color: white;
    padding: 2rem;
    border-radius: 2rem;
    margin-bottom: 1.5rem;
  }
  .hotel-list li .li-l {
    width: 95px;
    height: 120px;
    margin: 0 2rem 0 0;
  }
  .hotel-list li .li-r {
    width: calc(100% - 107px);
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .hotel-list li .li-r h4 {
    max-height: 48px;
    overflow: hidden;
  }
  .hotel-list li .li-r h6 {
    max-height: 32px;
    overflow: hidden;
  }
  .hotel-list li .li-r button {
    display: none;
  }
  .hotel-list li .li-r div {
    margin-bottom: 0;
  }
  .hotel-list li:nth-child(even) .li-l {
    order: 0;
  }
}
</style>